In der dritten Lektion erfahren Sie Folgendes:

1. Überschriften
2. Zeichensatz und Sonderzeichen
3. Waagerechte Linien
4. Zitate
5. Blinkender/Laufender Text
6. Grundeinstellungen für Text
7. Grundwissen Grafik
8. Einbinden von Grafiken in HTML-Dokumente
9. Grafiken und Grafikprogramme

 

Beispiel: 
 

<h1>

Eine Überschrift der Größe 1

Die Ausrichtung der Überschrift kann durch das Attribut align = center left right bestimmt werden. Wird keine Ausrichtung gewählt, ist die Überschrift automatisch linksbündig.

Beispiel: 
 

<h3 align="right">

<h6 align="center">

Beispiel: 
 

<h3>

<font face="Arial">

Eine Überschrift der Größe 3 mit Arial-Schriftart

Beispiel:
 

Durch die Angabe des Zeichensatzes (charset) werden alle deutschen Umlaute und das ß richtig dargestellt. Dieser Standard gilt ab HTML 4.0 und wird von den Browsern ab Version 4 interpretiert.
Notieren Sie diese Angabe in all Ihren HTML-Dokumenten, und Sie müssen sich um die korrekte Darstellung nicht mehr kümmern.

Ein HTML-Sonderzeichen ist bereits aus Lektion 2 bekannt: das geschützte Leerzeichen &nbsp;. 

Zeichen, die in HTML zur Steuerung von Befehlen dienen (< oder >), müssen stets als Sonderzeichen eingegeben werden. 
Um in Ihrem Dokument das Zeichen < zu erzeugen, geben Sie &lt; (engl. less than) ein.
Um in Ihrem Dokument das Zeichen > zu erzeugen, geben Sie &gt; (engl. greater than) ein.
 

Beispiel:
 

>>>>>> Hier klicken <<<<<< 
 

Weitere nützliche Sonderzeichen, die über einen eigenen HTML-Code verfügen, sind:
 

Als eigene Datei:
Die komplette Liste mit Sonderzeichen

Die Länge der Linie wird über width eingestellt. Der Wert für die Breite kann in % oder Pixel eingeben werden:

Beispiel: 

Aussehen im Browser:

Die Positionierung der Linie erfolgt mit align.

Beispiel: 
 

Aussehen im Browser:

Die Linien-Höhe wird über das Attribut size eingestellt. Der Wert wird in Pixel angegeben. Die Voreinstellung für die Linienhöhe ist 2 Pixel.

Beispiel: 
 

Aussehen im Browser:

Die Linien werden von den Browsern als dreidimensionale Linien dargestellt. Um dies zu unterbinden, fügen Sie das Attribut noshade dem <hr> Tag hinzu.

Beispiel: 
 

Aussehen im Browser:

Im Internet Explorer wird auch die Angabe der Linienfarbe interpretiert. Im Netscape Navigator bleibt die Farbangabe ohne Wirkung.

Beispiel: 
 

Beispiel: 
 

Bumerang 
War einmal ein Bumerang; 
War ein Weniges zu lang. 
Bumerang flog ein Stück,
Aber kam nicht mehr zurück. 
Publikum - noch stundenlang -
Wartete auf Bumerang.

Ringelnatz 

Beispiel: 
 

Dieser Text sieht so aus, als wäre
er mit Schreibmaschine geschrieben

Weitere Tags für präformatierten Text:
<listing></listing>
<plaintext></plaintext>
<xmp></xmp>
Sie können diese Tags ausprobieren, sollten aber auf keinem Fall mit ihnen arbeiten, da sie wahrscheinlich in der nächsten HTML-Version nicht mehr berücksichtigt werden.

Achtung:
Dieses Tag funktioniert nur im Netscape Navigator.

Mit dem Tag <marquee></marquee> können Sie Text über den Bildschirm laufen lassen.
Achtung:
Dieses Tag funktioniert nur im Interner Explorer und in den neuen Netscape Versionen.
 

Beispiel: 
 

Sie können weiterhin mit dem font-Tag arbeiten, um spezielle Textstellen zu formatieren. 

Beispiel:
 

• Erstellen Sie eine Seite in HTML und publizieren Sie diese Seite im Internet. Wählen Sie hierfür einen einfachen Text aus einer Fachzeitschrift. 
  
• Erzeugen Sie zwei Absätze und trennen Sie diese durch eine waagrechte Linie.
• Geben Sie Ihrem Text eine Überschrift und formatieren Sie diese.
• Verwenden Sie zur Formatierung mindestens zwei verschiedene Schriftarten.
• Machen Sie Gebrauch von mindestens zwei Schriftgrössen und -farben.
• Setzen Sie einzelne Wörter durch fette oder kursive Formatierung vom übrigen Text ab.  
  
• Achten Sie beim Veröffentlichen im Internet auf Dateinamen: Groß-/Kleinschreibung (Windows ignoriert diese Unterscheidung, aber die Server im Internet nicht!).
• Wählen Sie Dateinamen ohne Umlaute (kein ä ö ü im Dateinamen)
• Verwenden Sie keine Sonderzeichen in Dateinamen wie & $ §. Erlaubt sind lediglich der Bindestrich - und der Unterstrich _ . Was lokal auf Ihrem Rechner funktioniert, muss im Internet nicht funktionieren!
• Begnügen Sie sich mit maximal 8 Zeichen für den Dateinamen selbst, ohne die Dateiendung. Überprüfen Sie, ob Ihr Server längere Dateinamen zulässt!
• Beachten Sie, nur die Endungen der Dateinamen *.htm oder *.html sind zulässig.
• Egal, was nicht funktioniert, schicken Sie mir bei Schwierigkeiten eine E-Mail.
• Beachten Sie, dass bei vielen Servern die Uhren nicht nach MEZ laufen, das Speicherdatum kann je nach geographischem Standort des Servers und Einstellung von Ihrer lokalen Uhrzeit abweichen.

gif-Dateien

jpg-Dateien

(png-Dateien)

Die drei Formate unterscheiden sich in der Anzahl der möglichen Farben und der Größe der Grafikdatei. Alle drei Formate verwenden Komprimierungsverfahren, um die Dateigröße zu minimieren. 

Grafikdateien haben grundsätzlich den Nachteil, dass sie viel Speicherplatz benötigen. Alle drei Grafikformate komprimieren aus diesem Grund die Daten.

- gif - Format (Graphics Interchange Format)

In diesem Grafikformat sind nur 256 verschiedene Farben zulässig. Die Daten werden verlustfrei komprimiert. Die Komprimierung der Daten erfolgt nach einem rechtlich geschützten Algorithmus. Das Problem ist, dass nicht jedes Grafikprogramm dieses Format unterstützt.

Gif-Dateien haben folgende Merkmale:

• Gif-Dateien können interlaced gespeichert werden. Dies bedeutet, dass die Grafik nicht zeilenweise, sondern schichtenweise aufgebaut wird: Die Grafik erscheint zunächst unscharf und wird zunehmend schärfer. Dies hat den Vorteil, dass die Grafik schon während des Ladevorgangs erkennbar dargestellt wird.

• Mehrere Gif-Dateien können zusammenhängend gespeichert werden. Mehrere Einzelgrafiken bilden eine gemeinsame Datei, dadurch können Animationen erstellt werden, die sogenannten animierten Gifs.

• In Gif-Dateien kann eine Farbe als transparent dargestellt werden. Dies hat zur Folge, dass diese Farbe durch die Hintergrundfarbe des Dokuments dargestellt wird.

- jpg oder jpeg - Format (Joint Pictures Expert Group)

Dieses Format erlaubt 16 Millionen verschiedene Farben. Die Kompression der Daten ist nicht verlustfrei, d.h. eine Grafik im JPG-Format muss nicht mit dem Original identisch sein.

In manchen Grafikprogrammen ist es möglich, den Komprimierungsfaktor einzustellen. Hierbei gilt grundsätzlich: 
Je höher der Kompressionsfaktor, umso schlechter die Qualität, der Unterschied zwischen Original und JPG-Datei wird größer.

Manche Grafikprogramme erlauben auch die Einstellung der DPI-Dichte (DPI = dots per inch, Punkte pro inch). Dahinter verbirgt sich die Anzahl der Bildpunkte (Pixel) pro Inch (1 inch =2,5 cm). Konkret: 100 dpi sind 100 Bildpunkte pro 2,5 cm. Typische Werte für internettaugliche Grafiken liegen zwischen 50 und 100 dpi.

- png - Format (Portable Network Graphic)

Dieses Grafikformat versucht, die beiden Vorteile von gif und jpg zu vereinen: verlustfreie Kompression und 16 Millionen Farben.

Der Nachteil mit dem png-Format liegt bei älteren Browsern, die dieses Format nicht unterstützen - die Grafik wird nicht angezeigt.

Beachten Sie, dass insbesondere im IE auch andere Grafikformate angezeigt werden wie z.B. *.bmp (bitmap). Dies gilt allerdings nur für den Microsoft-Browser!

<img src="bild1.gif">

Img steht für Image und src für source, also Bildquelle. Die Wertangabe für die Grafikquelle ist der eigentliche Dateiname der Grafik, hier dateiname.gif.

Weitere Tag-Attribute sind Grafikbreite (width) und Grafikhöhe (height). Diese Werte sind in Pixel anzugeben. Eine 400 Pixel breite und 50 Pixel hohe Grafik wird mit <img src="bild1.gif" width="400" height="50"> eingebunden. Die Angaben über Höhe und Breite sind nicht notwendig, der Aufbau einer Seite im Browser wird jedoch durch diese Angaben beschleunigt. Der Browser reseviert einen der Grafikgröße entsprechenden Platz im Anzeigefenster, während die Grafik selbst noch geladen wird. Fehlen die Angaben über Höhe und Breite, kann der Browser das Seitenlayout erst erstellen, wenn alle Grafikdateien geladen sind.

Beispiel:

Beispiel:
 

Tipp:
Für die Wahl von Dateinamen gelten die gleichen Regeln wie für HTML-Dateien:

• Groß-/Kleinschreibung beachten (Windows ignoriert diese Unterscheidung, aber die Server im Internet nicht!).
• Wählen Sie Dateinamen ohne Umlaute (kein ä ö ü im Dateinamen)
• Verwenden Sie keine Sonderzeichen in Dateinamen wie & $ §. Absolut Tabu sind Leerzeichen in Dateinamen. Erlaubt sind lediglich der Bindestrich - und der Unterstrich _ . Was lokal auf Ihrem Rechner funktioniert, muss im Internet nicht funktionieren!
• Begnügen Sie sich mit maximal 8 Zeichen für den Dateinamen selbst (ohne die Dateiendung). Überprüfen Sie, ob Ihr Server längere Dateinamen zulässt!
• Beachten Sie die Endungen der Dateinamen: *.gif oder *.jpg sind zulässig.

Um die Breite und Höhe Ihrer Grafiken zu ermitteln, verwenden Sie ein Grafikprogramm, das gif- bzw. jpg- Dateien anzeigt.
 
 
 
 

Wallpaper: Hintergrundbild, farbige strukturierte Grafik als Hintergrundbild einer WebSite (jpg-Format)

Banner: Rohling (oder fertige Grafik) für Schaltflächen auf Navigationsleisten oder Werbebanner, auch animiert. (gif-Format)

Bars: Trennlinien für die optische Abtrennung in HTML-Dateien (jpg-, gif-Format)

Dots: Punkte, Aufzählungszeichen, Listenpunkte (gif-Format)

Cliparts: Bilder, Grafiken, Darstellungen (gif-Format).
 

Grafikprogramme

Bei der Vielzahl von Grafikprogrammen ist es etwas schwierig, alle beim Namen zu nennen:

Überprüfen Sie bitte selbst, ob Sie ein Grafikprogramm haben, welches gif- und jpg- Format unterstützt (Starten Sie das Programm. Öffnen Sie eine neue Grafik/Bild und speichern Sie. Bei der Auswahl des Dateiformats/Dateityps ganz unten in dem Auswahlfenster sollte jpg und gif möglich sein)
Seit Windows 98 können auch mit Paint *.gif- und *.jpg-Dateien geöffnet, verändert und gespeichert werden. Falls Sie kein Programm haben, womit sich die beiden Formate erstellen lassen, können Sie sich unter www.winsoftware.de umschauen und ein entsprechendes herunterladen. Wenn Sie wollen, können Sie sich Ihre Bilder auch im Web erstellen lassen (kostenlos natürlich) unter www.coolarchive.com. 

In der nächsten Lektion erfahren Sie, wie Grafiken eingebunden werden, die sich in anderen Verzeichnissen befinden, und Sie erstellen die ersten Hyperlinks.

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben, schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.